<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" class="">
                        <div class="wl-content-group">
                            <Button class="btn wl-content-button" type="primary" @click="modal2 = true">添加</Button>
                            <Button class="btn wl-content-button" type="primary">删除</Button>
                        </div>
                    </Col>
                    <Col span="24" >
                        <Table border ref="selection" :columns="columns4.columns4Header" :data="columns4.columns4Bodey">
                            <template slot-scope="{ row }" slot="onName">
                                <div style="color: #0080ff" @click="update(row)">{{ row.name }}</div>
                            </template>
                        </Table>
<!--                        <Modal-->
<!--                                v-model="modal1"-->
<!--                                title="编辑角色"-->
<!--                                @on-ok="ok"-->
<!--                                @on-cancel="cancel">-->
<!--                            <Form :model="formItem" :label-width="80" >-->
<!--                                <div style="font-size: 16px">角色基本信息</div>-->
<!--                                <FormItem label="角色名称">-->
<!--                                    <Input v-model="formItem.note" placeholder="Enter something..."></Input>-->
<!--                                </FormItem>-->
<!--                                <FormItem label="备注">-->
<!--                                    <Input v-model="formItem.note" placeholder="Enter something..."></Input>-->
<!--                                </FormItem>-->
<!--                                <div style="font-size: 16px">角色权限分配</div>-->
<!--                                <template>-->
<!--                                    <Tree :data="data2" show-checkbox></Tree>-->
<!--                                </template>-->
<!--                            </Form>-->
<!--                        </Modal>-->
<!--                        <Modal-->
<!--                                v-model="modal2"-->
<!--                                title="选择企业"-->
<!--                                @on-ok="ok"-->
<!--                                @on-cancel="cancel">-->
<!--                            <Form :model="formItem1" :label-width="80" >-->
<!--                                <div style="font-size: 16px">角色基本信息</div>-->
<!--                                <FormItem label="角色名称">-->
<!--                                    <Input v-model="input1"></Input>-->
<!--                                </FormItem>-->
<!--                                <FormItem label="备注">-->
<!--                                    <Input v-model="input2"></Input>-->
<!--                                </FormItem>-->
<!--                                <div style="font-size: 16px">角色权限分配</div>-->
<!--                                <template>-->
<!--                                    <Tree :data="data3" show-checkbox></Tree>-->
<!--                                </template>-->
<!--                            </Form>-->
<!--                        </Modal>-->
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">

                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
        <Modal
                v-model="modal1"
                title="编辑角色"
                @on-ok="ok"
                @on-cancel="cancel">
            <Form :model="formItem" :label-width="80" >
                <div style="font-size: 16px">角色基本信息</div>
                <FormItem label="角色名称">
                    <Input v-model="formItem.note" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="formItem.note" placeholder="Enter something..."></Input>
                </FormItem>
                <div style="font-size: 16px">角色权限分配</div>
                <template>
                    <Tree :data="data2" show-checkbox></Tree>
                </template>
            </Form>
        </Modal>
        <Modal
                v-model="modal2"
                title="选择企业"
                @on-ok="ok"
                @on-cancel="cancel">
            <Form :model="formItem1" :label-width="80" >
                <div style="font-size: 16px">角色基本信息</div>
                <FormItem label="角色名称">
                    <Input v-model="formItem1.input1"></Input>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="formItem1.input2"></Input>
                </FormItem>
                <div style="font-size: 16px">角色权限分配</div>
                <template>
                    <Tree :data="data3" show-checkbox></Tree>
                </template>
            </Form>
        </Modal>
    </div>
</template>

<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { group } from '@/api/test'
export default {
  components: {
    WlContentTop
  },
  data () {
    return {
      // userModel: {
      //   name: '',
      //   remarks: ''
      // },
      // model3: '',
      // sel_info: '',
      // formLeft1: {
      //   input1: '',
      //   input2: '',
      //   no: ''
      // },
      // input: {
      //   no: ''
      // },
      // formLeft: {
      //   no: '',
      //   device_real_id: '',
      //   unit_name: '',
      //   vin: '',
      //   city: '',
      //   plate_color: '',
      //   select: '',
      //   device_status: ''
      // },
      data2: [
        {
          title: '角色',
          expand: true,
          children: [
            {
              title: '系统管理',
              expand: true,
              children: [
                {
                  title: '日志管理'
                },
                {
                  title: '字典管理'
                },
                {
                  title: '用户车辆管理'
                },
                {
                  title: '角色权限管理'
                }
              ]
            },
            {
              title: '用户管理',
              expand: true,
              children: [
                {
                  title: '修改用户'
                },
                {
                  title: '删除用户'
                }
              ]
            }
          ]
        }
      ],
      data3: [
        {
          title: '角色',
          expand: true,
          children: [
            {
              title: '系统管理',
              expand: true,
              children: [
                {
                  title: '日志管理'
                },
                {
                  title: '字典管理'
                },
                {
                  title: '用户车辆管理'
                },
                {
                  title: '角色权限管理'
                }
              ]
            },
            {
              title: '用户管理',
              expand: true,
              children: [
                {
                  title: '修改用户'
                },
                {
                  title: '删除用户'
                }
              ]
            }
          ]
        }
      ],
      modal1: false,
      modal2: false,
      formItem: {
        note: ''
      },
      formItem1: {
        input1: '',
        input2: ''
      },
      columns4: {
        columns4Header: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '车牌号',
            slot: 'onName'
          },
          {
            title: '终端SIM卡号',
            key: 'note'
          }
        ],
        columns4Bodey: []
      },
      //  计算总数
      pageOptions: {
        totalRecord: 0
      },
      update (row) {
        this.modal1 = true
        this.formItem.note = row.note
      },
      // 传递参数：参数要全
      param: {
        page: 1,
        unit_id: 1
      }
    }
  },
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      group(this.param).then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    pageSizeChange (e) {
      this.param.page_size = e
      this.param.page = 1
      this.getList()
    },
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    }

  },
  watch: {
    treeSelectData (value) {
      console.log(value, '---')
      this.param.unit_id = value.id
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }
</style>
